<template>
  <section style="margin:20px;">
    <div style="text-align: center;">
      <el-button
        type="primary"
        style="margin-bottom:10px;"
        icon="el-icon-plus"
        @click="creatApp"
      >新增用户</el-button>
    </div>
    <el-col :span="24" class="toolbar" style="text-align: center;">
      <el-form :inline="true" :model="filters">
        <el-form-item label="用户ID">
          <el-input v-model="filters.id"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getApp">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <!--列表-->
    <el-table
      :data="allApiTable"
      highlight-current-row
      v-loading="listLoading"
      style="width: 90%;margin:auto;"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="用户id">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="名称">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="年龄">
              <span>{{ props.row.age }}</span>
            </el-form-item>
            <el-form-item label="性别">
              <span>{{ props.row.sex }}</span>
            </el-form-item>
            <el-form-item label="学历">
              <span>{{ props.row.education }}</span>
            </el-form-item>
            <el-form-item label="地址">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="电话">
              <span>{{ props.row.phone }}</span>
            </el-form-item>
            <el-form-item label="生日">
              <span>{{ props.row.birthday }}</span>
            </el-form-item>
            <el-form-item label="身份证">
              <span>{{ props.row.idCard }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="用户id"></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="sex" label="性别"></el-table-column>
      <el-table-column prop="education" label="学历"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column prop="birthday" label="生日"></el-table-column>
      <el-table-column prop="idcard" label="身份证"></el-table-column>
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="modifyApp(scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="prev, pager, next"
      v-if="pageTotal>10"
      @current-change="handleCurrentChange"
      style="margin:10px;text-align: center;"
      :total="pageTotal"
    ></el-pagination>

    <!--创建用户界面-->
    <el-dialog title="创建用户" :visible.sync="creatVisible"
      :close-on-click-modal="false"
      class="add-app" >
      <Ceate :sendAppCode="sendCode"/>
    </el-dialog>
    <el-dialog
      title="修改用户"
      :visible.sync="modifyVisible"
      :close-on-click-modal="false"
      class="add-app"
    >
      <Ceate :sendAppCode="sendCode"/>
    </el-dialog>
  </section>
</template>

<script>
import { findById, findList, getAllApi, deletetApp, doApp ,appCodeList } from "@/api/allApi"; // 引入相应API
import Ceate from "./creatApi";
export default {
  components: {
    Ceate
  },
  data() {
    return {
      filters: {
        id: ""
      },
      searchCode: "",
      allApiTable: [],
      pageTotal: 10,
      page: 1,
      listLoading: false,
      addLoading: false,
      creatVisible: false,
      modifyVisible: false,
      //sendList: "",
      sendCode: ""
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.page = val;
      let param = {
        appCode: this.searchCode,
        currentPage: this.page,
        pageSize: 10
      };
      this.getAppTable(param);
    },
    getAllApiInfo() {
      let param = {
        currentPage: 1,
        pageSize: 10
      };
      this.getAppTable(param);
    },
    // 查询
    getApp() {
      let param = {
        id: this.filters.id,
        currentPage: 1,
        pageSize: 10
      };
      this.getUser(param);
      this.searchCode = this.filters.id;
    },
    creatApp() {
      this.creatVisible = true;
      this.sendCode = "";
    },
    modifyApp(data) {
      this.modifyVisible = true;
      this.sendCode = data.id;
    },
    handleDelete(data) {
      this.$confirm("是否删除此项应用?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let param = {
          id: data.id
        };
        const loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
        });
        deletetApp(param).then(res => {
          if (res.data.code === 0) {
            this.$msgbox({
              title: "提示",
              message: "删除成功",
              callback: () => {
                this.handleCurrentChange(this.page);
              }
            });
          } else {
            this.$message({
              message: `[${res.data.desc}]:删除失败`,
              type: "error"
            });
          }
        });
        loading.close();
      });
    },
    getAppTable(param) {
      this.listLoading = true;
      findList().then(res => {
        if (res.data != undefined && res.data.length > 0) {
          let allJson = res.data;
          this.allApiTable = allJson;
          this.pageTotal = res.length;
        } else {
          this.$message({
            message: `查询失败`,
            type: "error"
          });
        }
        this.listLoading = false;
      });
      // getAllApi(param).then(res => {
      //   if (res.data.code === 0) {
      //     let allJson = res.data.data.pageData;
      //     this.allApiTable = allJson;
      //     this.pageTotal = res.data.data.pageTotal;
      //   } else {
      //     this.$message({
      //       message: `[${res.data.desc}]:查询失败`,
      //       type: "error"
      //     });
      //   }
      //   this.listLoading = false;
      // });
    },
    getUser(param) {
      this.listLoading = true;
      appCodeList(param).then(res => {
          if (res.data.code === 0) {
            // console.log(res.data.data)
            let allJson = res.data.data;
            this.allApiTable = allJson;
          } else {
            this.$message({
              message: `[${res.data.desc}]:查询失败`,
              type: "error"
            });
          }
          this.listLoading = false;
        });
      // getAllApi(param).then(res => {
      //   if (res.data.code === 0) {
      //     let allJson = res.data.data.pageData;
      //     this.allApiTable = allJson;
      //     this.pageTotal = res.data.data.pageTotal;
      //   } else {
      //     this.$message({
      //       message: `[${res.data.desc}]:查询失败`,
      //       type: "error"
      //     });
      //   }
      //   this.listLoading = false;
      // });
    }
  },
  mounted() {
    this.getAllApiInfo();
  }
};
</script>

<style>
.add-app .el-dialog {
  width: 80%;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>